<template>
  <div class="products-list table-header-fix" style="overflow-x: auto">
    <div class="my-table" style="width: 100%; min-width: 1100px; overflow-x: auto" v-if="list.length > 0">
      <div class="table-header">
        <div>
          <div class="row">
            <div class="col1" style="min-width: 107px">关联订单编码</div>
            <div class="col1" style="min-width: 107px">测量单编码</div>
            <div class="col6">商品种类信息</div>
            <div class="col5">数量</div>
            <div class="col5">件数</div>
            <div class="col4">供应商名称</div>
            <div class="col4">测量前订单总金额</div>
            <div class="col4">测量后订单总金额</div>
            <div class="col5">税额</div>
            <div class="col5">是否开票</div>
            <div class="col4">下单时间</div>
            <div class="col6">操作</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="products-list" style="overflow-x: auto">
    <div class="my-table" style="width: 100%; min-width: 1100px; overflow-x: auto" v-if="list.length > 0">
      <div class="table-body" style="max-height: calc(100vh - 610px)">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <div class="tpis-head">
            <div class="jzt-flex-start">
              <p class="orange" v-if="item.businessState === 1" style="width: 120px">待接单</p>
              <p class="orange" v-else-if="item.businessState === 2" style="width: 120px">待测量定价</p>
              <p class="green" v-else-if="item.businessState === 3" style="width: 120px">已测量并定价</p>
              <p class="red" v-else style="width: 120px">已撤销</p>

              <p>测量时间：{{ item.measureTime || "-" }}</p>
            </div>
          </div>
          <div class="row">
            <div class="col1 text-break">
              <!-- 关联订单编码 -->
              <el-button
                class="border"
                type="primary"
                link
                v-if="item.orderNo"
                :title="item.orderNo"
                @click="toPath({ path: '/oder/detail', query: { orderId: item.orderId } })"
              >
                <p class="text-over" style="max-width: 100px">{{ item.orderNo }}</p>
              </el-button>
              <span v-else>--</span>
            </div>
            <div class="col1 text-break">
              <!-- 测量单编码 -->
              <el-button
                class="border"
                type="primary"
                link
                v-if="item.measureOrderNo"
                :title="item.measureOrderNo"
                @click="toPath({ path: '/oder/measure/detail', query: { measureOrderId: item.measureOrderId } })"
              >
                <p class="text-over" style="max-width: 100px">{{ item.measureOrderNo }}</p>
              </el-button>
              <span v-else>--</span>
            </div>
            <div class="col6">
              <!-- 商品种类信息 -->
              {{ item.categoryNum || 0 }}种商品/({{ item.detailNum || 0 }}件)
            </div>
            <div class="col5">
              <!-- 数量 -->
              {{ item.goodsNum }}
            </div>
            <div class="col5">
              <!-- 件数 -->
              {{ item.detailNum }}
            </div>
            <div class="col4">
              <!-- 供应商名称 -->
              {{ item.anotherName }}
            </div>
            <div class="col4">
              <!-- 测量前订单总金额 -->
              {{ item.previousTotalAmount }}
            </div>
            <div class="col4">
              <!-- 测量后订单总金额 -->
              {{ item.goodsTotalAmount }}
            </div>
            <div class="col5">
              <!-- 税额 -->
              {{ item.invoiceAmount }}
            </div>
            <div class="col5">
              <!-- 是否开票 -->
              {{ item.isSupportBilling ? "是" : "否" }}
            </div>
            <div class="col4">
              <!-- 下单时间 -->
              {{ item.createTime }}
            </div>
            <div class="col6">
              <!-- 操作 -->
              <div>
                <p>
                  <el-button
                    type="primary"
                    link
                    @click="toPath({ path: '/oder/measure/detail', query: { measureOrderId: item.measureOrderId } })"
                  >
                    查看
                  </el-button>
                </p>
                <p v-if="item.businessState === 1">
                  <el-button type="primary" link @click="clickCancel(item)">撤销订单</el-button>
                </p>
                <p v-if="item.businessState === 3">
                  <el-button
                    type="primary"
                    link
                    @click="
                      toPath({
                        path: '/regular-time-procure',
                        query: { orderId: item.orderId, factorId: item.factoryId, isNow: '1' }
                      })
                    "
                    >生成采购单</el-button
                  >
                </p>
                <p v-if="item.businessState === 4"><el-button type="primary" link @click="clickDel(item)">删除</el-button></p>
              </div>
            </div>
          </div>
          <div class="tips">
            <p class="mb4 f12">关联客户：{{ item.customer }}</p>
            <p class="f12">测量地址：{{ item.receivingName }} / {{ item.receivingMobile }} / {{ item.receivingAddress }}</p>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="display: flex; justify-content: center; width: 100%">
      <el-empty description="这里暂时什么都没有" />
    </div>

    <!-- 撤销订单-二次确认 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpenCancel"
      :title="'撤销确认'"
      :message="'您正在执行撤销测量单操作，撤销后，供应商将无法在接单，以及进行测量服务，是否要继续撤销当前订单？'"
      :submitBtnText="'继续撤销'"
      @submit="returnSubmitCancel"
    />

    <!-- 确认删除 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpenDel"
      :message="'您正在执行删除当前订单操作，删除后，当前订单将不在显示，是否继续删除？'"
      :submitBtnText="'确认删除'"
      @submit="returnSubmitDel"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import CountdownMy from "./countdown";
import ActionSubmitDialog from "@/components/ActionSubmitDialog";
import { ElMessage } from "element-plus";
import { measureOrderDel, cancelOrder } from "@/apis/order/measure";

const emit = defineEmits(["refresh"]);
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
});
const _isOpenCancel = ref(false);
const _isOpenDel = ref(false);
const currObj = ref({});

const clickCancel = row => {
  currObj.value = row;
  _isOpenCancel.value = true;
};
const clickDel = row => {
  currObj.value = row;
  _isOpenDel.value = true;
};

//确认撤销
const returnSubmitCancel = () => {
  console.log("这里请求接单的接口");
  cancelOrder({ measureOrderId: currObj.value.measureOrderId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "测量单撤销成功",
        type: "success"
      });
      _isOpenCancel.value = false;
      emit("refresh");
    }
  });
};

//确认删除
const returnSubmitDel = () => {
  console.log("这里请求删除接口");
  measureOrderDel({ measureOrderId: currObj.value.measureOrderId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "删除成功",
        type: "success"
      });
      _isOpenDel.value = false;
      emit("refresh");
    }
  });
};

//打开新的页签
const toPath = obj => {
  if (obj.path == "/regular-time-procure") {
    router.push(obj)
  } else {
    const routeUrl = router.resolve(obj);
    window.open(routeUrl.href, "_blank");
  }
};
</script>

<style lang="scss" scoped>
.table-header-fix {
  position: sticky;
  top: 70px;
  background-color: white;
  z-index: 22;
}
.download-wrap {
  border: 1px solid #e1e6ed;
  border-bottom: none;
}
.products-list {
  .table-header {
    background-color: #f2f6fc;
    margin-bottom: 10px;
    border: 1px solid #e1e6ed;
    .row > div {
      align-items: center;
    }
  }
  .table-body {
    // max-height: calc(100vh - 345px);
    .green {
      color: #19cc15;
    }
    .orange {
      color: #ff9900;
    }
    .red {
      color: #ff3333;
    }
    // overflow: auto;
    .list-item {
      margin-bottom: 10px;
      & > div {
        border: 1px solid #e1e6ed;
        &.row {
          // display: flex;
          & > div:not(:last-of-type) {
            border-right: 1px solid #e1e6ed;
          }
        }
        & > div {
          display: flex;
          align-items: center;
        }
      }
      .col1 {
        // min-width: 100px;
        & > div {
          display: flex;
        }

        .left {
          img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
          }
        }
        .right {
          padding-left: 18px;
          .name {
            font-size: 14px;
            color: #3d3d3d;
            margin-bottom: 5px;
          }
          p {
            font-size: 12px;
            color: #86909c;
            margin-bottom: 5px;
          }
        }
      }
      .tpis-head {
        line-height: 24px;
        padding: 8px 20px;
        border-bottom: none;
        background-color: #f5f7fa;
      }
      .tips {
        padding: 8px 20px;
        border-top: none;
        line-height: 22px;
        box-sizing: border-box;
        color: #4e5969;
      }
    }
  }
  .table-header,
  .table-body {
    & > div > div.row {
      // display: flex;
      // justify-content: space-between;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 115px;
      & > div {
        padding: 14px 20px;
        display: flex;
        flex-wrap: wrap;
        :deep(.el-button.el-button--primary.is-link.border) {
          width: 100%;
          span {
            // white-space: break-spaces;
            // word-break: break-all;
            display: inline-block;
            max-width: 180px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-bottom: 1px solid #007dff;
          }
        }
        // &.col1 {
        //   width: 100px;
        // }

        // &.col4 {
        //   flex: 1;
        //   box-sizing: border-box;
        // }
        // &.col5 {
        //   flex: 1;
        //   box-sizing: border-box;
        // }
        // &.col6 {
        //   flex: 1;
        //   box-sizing: border-box;
        // }
      }
    }
  }
}
</style>
